<template>
  <header class="header-container">
    <nav class="nav-container nav-bar">
      <div class="logo">
        <nuxt-link to="/"><img src="../assets/images/public/logo.png" alt="" /></nuxt-link>
      </div>
      <aside class="experience">
        <nuxt-link to="/login">产品体验</nuxt-link>
      </aside>
      <div class="close visible-mobile" @click="showMenu">
        <img :src="icon" alt="">
      </div>
      <ul class="nav-link-list" ref="navLinkList">
        <li><nuxt-link to="/">首页</nuxt-link></li>
        <li><nuxt-link to="diagnosis">财税诊断</nuxt-link></li>
        <li><nuxt-link to="/bigdata">工商大数据</nuxt-link></li>
        <li><nuxt-link to="/news">行业资讯</nuxt-link></li>
        <li><nuxt-link to="/aboutus">关于我们</nuxt-link></li>
      </ul>
    </nav>
  </header>
</template>

<script>

require
export default {
  data() {
    return {
      isShowMenu: false,
      icon: require('@/assets/images/public/icon_open.svg')
    };
  },
  methods: {
    showMenu() {
      this.isShowMenu = !this.isShowMenu;

      if (this.isShowMenu) {
        this.$refs.navLinkList.style.height = "40%";
        this.icon = require('@/assets/images/public/icon_close.svg')
      } else {
        this.$refs.navLinkList.style.height = "0";
        this.icon = require('@/assets/images/public/icon_open.svg')
      }
    },
  },
};
</script>

<style lang="scss">
$pc-heihgt: 64px;
$mobile-height: 32px;
$mobile-font-size: 12px;

.header-container {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: $pc-heihgt;
  background-color: #FFF;
  z-index: 999;

  .nav-bar {
    height: 100%;
    display: flex;
    align-items: center;

    .logo {
      display: flex;
      align-items: center;
    }

    .nav-link-list {
      margin-left: 27px;
      display: flex;
      align-items: center;
      background-color: #FFF;

      li {
        padding: 0 18px;
        display: flex;

        a {
          position: relative;
          display: flex;
          line-height: $pc-heihgt;
          height: $pc-heihgt;
          align-self: stretch;
          color: $primary-text--color;
          font-size: 14px;
        }


        a::after {
          content: "";
          position: absolute;
          bottom: 0;
          width: 0;
          height: 2px;
          border-radius: 2px;
          background-color: $primary-color;
          transition: all 0.3s linear;
        }

        a.nuxt-link-exact-active::after,
        &:hover a::after
        {
          width: 100%;
        }

        a.nuxt-link-exact-active,
        &:hover a {
          color: $primary-color;
        }
      }
    }
  }
}

.experience {
  position: absolute;
  right: 60px;
  text-align: center;
  width: 90px;
  height: 30px;
  background: #236FFF;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  a {
    color: #fff;
    font-size: 14px;
  }
}


.visible-mobile {
  display: block;
  position: absolute;
  right: 10px;

  img {
    width: 36px;
    height: 36px;
  }
}

.nav-container {
  padding: 0 15px;
  justify-content: space-between;
  padding-right: 130px;
}

.nav-link-list {
  position: fixed;
  left: 0;
  top: 64px;
  flex-direction: column;
  width: 100%;
  height: 0;
  margin-left: 0 !important;
  overflow: hidden;
  transition: all .5s linear;
}

.hidden-mobile {
  display: none;
}


@media screen and (min-width: 768px) {

  .visible-mobile {
    display: none;
    font-size: 16px;
  }


  .nav-link-list {
    position: static;
    flex-direction: row;
    height: 100%;
    margin-left: 27px !important;
    overflow: visible;
    transition: none;
  }

  .experience {
    right: 0;
    
  width: 130px;
  height: 64px;
  background-color: $primary-color;
  border-radius:0

  }
}


@media screen and (min-width: 992px) {

  .nav-link-list li {
    padding: 0 36px !important;
  }
}

</style>
